<script lang="ts" setup>
import * as version from '@/api/app/version'
import type { AppVersionQueryCriteria, AppVersionTableView } from '@/api/app/version/types'

const visible = ref(false)
const props = ref<FormDialogProp>({
    title: '',
    id: undefined
})

const paginationRequest = reactive<PaginationRequest<AppVersionQueryCriteria>>({
    pageIndex: 1,
    pageSize: 10,
    criteria: {
        appId: ''
    },
    order: {
        property: 'version',
        direction: 'DESC'
    }
})
const paginationResponse = reactive<PaginationResponse<AppVersionTableView>>({
    total: 0,
    data: []
})

const query = async () => {
    const res = await version.query(paginationRequest)
    paginationResponse.total = res.total
    paginationResponse.data = res.data
}

watch(paginationRequest, () => {
    query()
}, {
    immediate: false
})

const remove = async (id: string) => {
    await version.remove(id)
    query()
}

const open = (dialogProps: FormDialogProp) => {
    props.value = dialogProps

    visible.value = true

    paginationRequest.criteria!.appId = dialogProps.id || ''
    // query()
}

defineExpose({
    open
})
</script>

<template>
    <el-drawer v-model="visible" :title="props.title" size="50%">
        <el-table :data="paginationResponse.data" >
            <el-table-column label="版本号" prop="version"></el-table-column>
            <el-table-column label="升级模式" prop="upgradeMode"></el-table-column>
            <el-table-column label="发布时间" prop="releaseTime"></el-table-column>
            <el-table-column label="安装包" prop="fileUrl"></el-table-column>
            <el-table-column label="操作" prop="action">
                <template #default="scope">
                    <el-popconfirm title="确定要删除吗？" @confirm="remove(scope.row.id)">
                        <template #reference>
                            <el-button type="text">删除</el-button>
                        </template>
                    </el-popconfirm>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination :total="paginationResponse.total" :page-size="paginationRequest.pageSize" :page-sizes="[10, 20, 50, 100]" 
            :current-page="paginationRequest.pageIndex" 
            layout="total, sizes, prev, pager, next, jumper" 
            @size-change="(size: number) => paginationRequest.pageSize = size" 
            @current-change="(pageIndex: number) => paginationRequest.pageIndex = pageIndex"></el-pagination>
    </el-drawer>
</template>

<style lang="scss" scoped>

</style>